@import "compass";
//边框阴影
.box-shadow{
    @include box-shadow(1px 1px 5px 5px #000);
}
// 动画
.animate{
    @include animation(myani 10s ease-in-out 2s infinite alternate);
}
// 背景绘制区域
.bg-clip{
    @include background-clip(content-box);
}
// 背景图片定位
.bg-origin{
    @include background-origin(padding-box);
}
// 边框圆角
.border-radius{
    @include border-radius(6px);
}
// 透明度
.opacity{
    @include opacity(.5);
}
// 转换
.translate{
    @include transform(translate(20px, 50px));
}
// 过渡
.transition{
    @include transition(all 2s ease-in-out 1s);
}
// 行内块元素
.ib{
    @include inline-block();
}
// 渐变
.linear-gradient{
    @include background(linear-gradient(#000,#ccc));
}
// placeholder
input[type="text"]{
    @include input-placeholder{
        color:#bfbfbf;
        font-style: italic;
    }
}
@import "compass";
 
.ex {
  width: 48%;
  margin-right: 2%;
  float: left;
  @include clearfix;
  p {
    padding-top: 10px;
  }
}
 
.gradient-example {
  width: 80px;
  height: 80px;
  background: red;
  float: left;
  margin: 1em 1em 0 0;
}
 
// This will yield a radial gradient with an apparent specular highlight
#radial-gradient {
  @include background-image(radial-gradient(45px 45px, cyan 10px, dodgerblue 30px));
}
 
// This yields a linear gradient spanning from the upper left corner to the lower right corner
#linear-gradient {
  @include background-image(linear-gradient(to bottom right, white, #dddddd));
}
 
// This yields a gradient starting at the top with #fff, ending in #aaa
#v-gradient {
  @include background-image(linear-gradient(white, #aaaaaa));
}
 
// Same as above but with a #ccc at the halfway point
#v-gradient-2 {
  @include background-image(linear-gradient(white, #cccccc, #aaaaaa));
}
 
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
#v-gradient-3 {
  @include background-image(linear-gradient(white, #cccccc 30%, #bbbbbb 70%, #aaaaaa));
}
 
// This yields a horizontal linear gradient spanning from left to right.
#h-gradient {
  @include background-image(linear-gradient(to right, white, #dddddd));
}
 
#svg-gradient {
  $svg-gradient-shim-threshold: 1 !global;
  @include background-image(linear-gradient(to right, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}
 
#angle-gradient {
  $svg-gradient-shim-threshold: 1 !global;
  @include background-image(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}
 
#angle-gradient-svg {
  background-image: -svg(linear-gradient(120deg, #2ac363, #cd8c14, #9c4cc2));
  width: 80px;
  height: 80px;
}